import { useAddUserChannelMutation } from "@service/channel";
import toast from "react-hot-toast";
import { useEffect } from "react";

interface Props {
    channel: Channel;
    seq: number;
}

export default function Item({ channel, seq }: Props) {


    // 用于添加用户频道
    const [addUserChannel, { isSuccess, isLoading }] = useAddUserChannelMutation();

    // 添加用户频道
    const addChannel = () => {
        // 防止用户连续点击同一个频道
        if (isLoading) {
            return toast("频道正在添加, 请耐心等待", { icon: "😜" });
        }
        // 发送添加频道请求
        addUserChannel({ channels: [{ id: channel.id, seq }] });
    };

    // 检测用户频道是否添加成功
    useEffect(() => {
        // 用户提示
        if (isSuccess) toast.success("用户频道添加成功");
    }, [isSuccess]);
    return (
        <span onClick={addChannel} key={channel.id}>
            + {channel.name}
        </span>
    );
}